Bootstrap Snippet Service cards using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <section>
        <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive">
        <div class="container">
            <div class="card-shadow">
                <div class="row">
                    <div class="col-md-4" id="cardes" >
                        <div class="card-image">
                            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWyCU54BU4eQjmn8dzLXL_vyTt1D3fG9Tv26cM5C91OOF-6FTx4p_9gVqTkKb1ooc2Stk&usqp=CAU" alt="">
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="card-info">
                            <div class="card-title">
                                <h2>Kickstarter</h2>
                                <div class="low-rate">
                                    <p>Was: </p><span>$500</span>
                                </div>
                            </div>
                            <div class="card-offer">
                                <div class="card-clock">
                                    <i class="far fa-clock"></i>
                                    <p>15 Days Delivery</p>
                                </div>
                                <div class="card-offer-rate">
                                    <p>Limited TIme Offer: </p>
                                    <span>$100</span>
                                </div>
                                
                            </div>
                            <div class="card-points">
                                <div class="row">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.card-shadow {
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  margin: 20px 0px;
}
img{
    width:100%;
    height:280px;
     border-radius: 10px 0px 0px 10px;
}
.card-shadow .card-info {
  padding: 10px 20px 10px 0px;
}
.card-shadow .card-info .card-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0;
}
.card-shadow .card-info .card-title h2 {
  margin: 0;
}
.card-shadow .card-info .card-title .low-rate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Service cards"
Bootstrap 4.1.1 Snippet by Mohsin Mukhtar

Related: See More

Questions / Comments:

"Service cards" Bootstrap 4.1.1 Snippet by Mohsin Mukhtar

Related: See More

Questions / Comments:

"Service cards"
Bootstrap 4.1.1 Snippet by Mohsin Mukhtar